<template>
  <div class="article">
    <header>
      <van-nav-bar title="心理杂志" left-text="返回" />
    </header>
    <div class="classify">
      <van-tabs v-model="active">
        <van-tab title="全部">
          <div class="content">
            <ul>
              <li v-for="item in detaillist" :key="item">
                <div class="images">
                  <img :src="item.img" alt="" />
                </div>
                <div class="content-text">
                  <h5>{{ item.tip }}</h5>
                  <div class="praise">
                    <img src="../assets/img/Detailimg/icon02.png" alt="" />
                    <span>{{ item.assistance }} &nbsp;</span>
                    <img src="../assets/img/Detailimg/icon03.png" alt="" /><span
                      >{{ item.price }}</span
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="情感">情感</van-tab>
        <van-tab title="亲子">亲子</van-tab>
        <van-tab title="职场">职场</van-tab>
        <van-tab title="健康">健康</van-tab>
        <van-tab title="科普">科普</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { computed, onMounted, reactive } from "vue";
export default {
  setup() {
    const store = useStore();
    const detaildata = () => store.dispatch("detaildata");
    const detaillist = reactive(computed(() => store.state.Detail.detaillist));
    onMounted(() => {
      detaildata();
    });

    return {
      store,
      detaillist,
      detaildata,
    };
  },
};
</script>
<style lang="less" scoped>
.article {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 500;
  }
  .classify {
    .van-tabs__wrap {
      margin-top: 46px;
      position: fixed;
      top: 0px;
      left: 0px;
      background: #fff;
      z-index: 500;
      width: 100%;
    }
    .content {
      margin-top: 92px;
      width: 100%;
      ul {
        li {
          display: flex;
          padding: 8px;
          border-bottom: 1px solid #ccc;
          .images {
            img {
              width: 87px;
              height: 69px;
            }
          }
          .content-text {
            width: 100%;
            position: relative;
            h5 {
              font-size: 15px;
              position: absolute;
              top: -26px;
              left: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .praise {
              position: absolute;
              bottom: 5px;
              left: 10px;
              font-size: 10px;
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
</style>
